<template>
    <el-form :model="skuParams" label-width="120px">
        <el-form-item label="SKU名称">
            <el-input v-model="skuParams.skuName" placeholder="SKU名称" />
        </el-form-item>
        <el-form-item label="价格(元)">
            <el-input type="number" v-model="skuParams.price" placeholder="价格(元)" />
        </el-form-item>
        <el-form-item label="重量(g)">
            <el-input type="number" v-model="skuParams.weight" placeholder="重量(g)" />
        </el-form-item>
        <el-form-item label="SKU描述">
            <el-input type="textarea" v-model="skuParams.skuDesc" placeholder="SKU描述" />
        </el-form-item>
        <el-form-item label="平台属性">
            <el-form label-width="120px" inline>
                <el-form-item :label="item.attrName" v-for="item in attrList" :key="item.id">
                    <el-select v-model="item.attrIdOrattrValueId">
                        <el-option v-for="subItem in item.attrValueList" :key="subItem.id" :label="subItem.valueName"
                            :value="item.id + ':' + subItem.id" />
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="销售属性">
            <el-form label-width="120px" inline>
                <el-form-item v-for="item in saveList" :key="item.id" :label="item.saleAttrName">
                    <el-select v-model="item.saleIdOrValueId">
                        <el-option v-for="subItem in item.spuSaleAttrValueList" :label="subItem.saleAttrValueName"
                            :value="item.id + ':' + subItem.id" />
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="图片名称">
            <el-table :data="tableData" border style="width: 100%" ref="imgTable">
                <el-table-column type="selection" width="80" align="center" />
                <el-table-column label="图片">
                    <template #="{ row }">
                        <img :src="row.imgUrl" style="width: 100px; height: 100px;" />
                    </template>
                </el-table-column>
                <el-table-column prop="imgName" label="名称" />
                <el-table-column label="操作">
                    <template #="{ row }">
                        <el-button type="primary" @click="setTrue(row)">设置默认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="save">确定</el-button>
            <el-button type="primary" @click="cencel">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { attrInfoList } from '@/api/product/attr';
import { onMounted, reactive, ref } from 'vue';
import type { SkuAdd, SorN, SpuValue, ReturnImages } from '@/api/product/spu/type';
import { getSpuSaleAttrList, getSpuImageList, reqAddSku } from '@/api/product/spu'
import type { Cate_Table } from '@/api/product/attr/type';
import { ElMessage } from 'element-plus'
// 给父组件传值
let $emit = defineEmits(['changeFlagCard'])
const skuParams = reactive<SkuAdd>({
    category3Id: '', //三级分类的ID
    spuId: '', //已有的SPU的ID
    tmId: '',//SPU品牌的ID
    skuName: '', //sku名字
    price: '', //sku价格
    weight: '', //sku重量
    skuDesc: '', //sku的描述
    skuAttrValueList: [],
    skuSaleAttrValueList: [],
    skuDefaultImg: '',//sku图片地址
})
// 平台属性
const attrList = ref<any>()
// 销售属性
const saveList = ref<any>()
// 图片数据
const tableData = ref<any>()
// 表格ref
const imgTable = ref<any>()

// 表格图片
// 页面初始化
const info = (C1Id: SorN, C2Id: SorN, C3Id: SorN, row: SpuValue) => {
    skuParams.category3Id = row.category3Id
    skuParams.spuId = row.id as number
    skuParams.tmId = row.tmId as number
    getAttrList(row.id as number)
    getAttr(C1Id, C2Id, C3Id)
    getImgs(row.id as number)
}
onMounted(() => {

})
// 获取平台属性
const getAttr = async (C1Id: SorN, C2Id: SorN, C3Id: SorN) => {
    const data: Cate_Table = await attrInfoList(C1Id, C2Id, C3Id)
    if (data.code !== 200) return
    attrList.value = data.data
}
// 获取销售属性
const getAttrList = async (spuId: SorN) => {
    const data = await getSpuSaleAttrList(spuId)
    if (data.code !== 200) return
    saveList.value = data.data
}
// 获取图片
const getImgs = async (spuId: SorN) => {
    const data: ReturnImages = await getSpuImageList(spuId)
    if (data.code !== 200) return
    tableData.value = data.data
}
// 取消
const cencel = () => {
    $emit('changeFlagCard', { flagCard: 0 })
}
// 设置默认选择图
const setTrue = (row: any) => {
    tableData.value.forEach((item: any) => {
        imgTable.value.toggleRowSelection(item, false)
    })
    imgTable.value.toggleRowSelection(row, true)
    skuParams.skuDefaultImg = row.imgUrl

}
// 确定保存
const save = async () => {
    skuParams.skuAttrValueList = attrList.value.reduce((alg: any, item: any) => {
        if (item.attrIdOrattrValueId) {
            let [attrId, valueId] = item.attrIdOrattrValueId.split(':')
            alg.push({ attrId, valueId })
        }
        return alg
    }, [])
    skuParams.skuSaleAttrValueList = saveList.value.reduce((alg: any, item: any) => {
        if (item.saleIdOrValueId) {
            let [saleAttrId, saleAttrValueId] = item.saleIdOrValueId.split(':')
            alg.push({ saleAttrId, saleAttrValueId })
        }
        return alg
    }, [])
    const data: any = await reqAddSku(skuParams)
    console.log(data)
    if (data.code === 200) {
        ElMessage.success('添加SKU成功')
        cencel()
    } else {
        ElMessage.error('添加SKU失败')
    }
}
defineExpose({ info })
</script>
<script lang="ts">
export default {
    name: 'AddSku'
}
</script>
<style scoped></style>